<template>
  <cu-custom bg-color="bg-gradual-header">
    <template #content>导航栏</template>
  </cu-custom>
  <view class="container">
    <view class="text-right">
      <view style="position: relative" class="padding-sm">
        <button class="cu-btn round sm bg-grev shadow" @click="myNote">
          <text class="cuIcon-formfill"></text>{{ name }}的简历
        </button>
      </view>
    </view>
    <view class="flex">
      <view v-if="infoForm.personal.data.img" class="bg-img animation-scale-up">
        <image
          :src="infoForm.personal.data.img"
          mode="aspectFill"
          class="pic"
        ></image>
        <view class="cu-tag bg-block" @click="onDelImg">
          <text class="cuIcon-close"></text>
        </view>
      </view>
      <view
        v-else
        class="bg-cyan add animation-slide-left"
        @click="onChooseImage"
      >
        <text class="cuIcon-cameraadd"></text>
        <text>添加简历照</text>
      </view>
      <view class="flex-sub margin-left animation-slide-right">
        <view class="text-xxl">{{ name }}</view>
        <view class="text-xs">完成度{{ completion }}%</view>
        <view class="margin-tb-sm">
          <button class="cu-btn bg-olive shadow" @click="preView">
            <text class="cuIcon-down"></text> 预览/下载简历
          </button>
        </view>
      </view>
    </view>
    <template v-for="item in list" :key="item.label">
      <view class="cu-bar solid-bottom">
        <view class="action">
          <text class="cuIcon-title text-orange"></text>{{ item.label }}
        </view>
        <view class="action">
          <button
            class="cu-btn sm shadow"
            :class="item.icon ? 'bg-orange' : 'bg-cyan'"
            @click="onNavigationTo(item)"
          >
            <text
              :class="'cuIcon-' + (item.icon ? item.icon : 'writefill')"
            ></text>
          </button>
        </view>
      </view>
      <!-- 个人信息 -->
      <view
        v-if="item.type == -1 && infoForm.personal"
        class="text-xs padding-top-xs line-height-40"
        @click="toEdit(item.type, undefined)"
      >
        <view v-if="infoForm.personal.data.name">
          <view class="ml-con">
            <text class="margin-right-lg">{{
              infoForm.personal.data.name
            }}</text>
            <text>男</text>
          </view>
          <view class="ml-con">
            <text class="margin-right-lg">手机号</text>
            <text>{{ infoForm.personal.data.phone }}</text>
          </view>
          <view class="ml-con">
            <text class="margin-right-lg">邮箱</text>
            <text>{{ infoForm.personal.data.email }}</text>
          </view>
        </view>
      </view>
      <!-- 自我评价 -->
      <view
        v-if="item.type == 0 && infoForm.selfEvaluation"
        @click="toEdit(item.type, undefined)"
      >
        <view
          v-if="infoForm.selfEvaluation.data"
          class="ml-con flex justify-between text-xs padding-top-xs"
        >
          <div v-html="infoForm.selfEvaluation.data.text"></div>
        </view>
      </view>
      <!-- 教育背景 -->
      <template v-if="item.type == 1 && infoForm.educationalBg">
        <view
          v-for="(education, index) in infoForm.educationalBg.data"
          :key="index"
          class="solid-bottom text-xs"
          @click="toEdit(item.type, index)"
        >
          <view class="ml-con">
            <text class="margin-right-lg line-height-40">{{
              education.schoolName
            }}</text>
          </view>
          <div class="flex">
            <view class="ml-con">
              <text class="line-height-40">{{
                education.time.join("至")
              }}</text>
            </view>
          </div>
        </view>
      </template>
      <!-- 工作经历 -->
      <view v-if="item.type == 2 && infoForm.workExperience">
        <view
          v-for="(work, index) in infoForm.workExperience.data"
          :key="index"
          class="solid-bottom text-xs"
          @click="toEdit(item.type, index)"
        >
          <view class="ml-con">
            <text class="margin-right-lg line-height-40">{{
              work.companyName
            }}</text>
          </view>
          <div class="flex">
            <view class="ml-con line-height-40">
              <text>{{ work.jobName }}</text>
            </view>
            <view class="ml-con line-height-40">
              <text>{{ work.time.join("至") }}</text>
            </view>
          </div>
        </view>
      </view>
      <!-- 个人证书 -->
      <view v-if="item.type == 3 && infoForm.certificate">
        <view
          v-for="(cert, index) in infoForm.certificate.data"
          :key="index"
          class="text-xs"
          @click="toEdit(item.type, index)"
        >
          <view class="ml-con">
            <text class="margin-right-lg line-height-40">{{ cert.text }}</text>
          </view>
          <view class="ml-con">
            <text class="line-height-40">{{ cert.time.join("至") }}</text>
          </view>
        </view>
      </view>
      <!-- 技能 -->
      <view v-if="item.type == 4 && infoForm.skills" class="padding-top-xs">
        <view
          v-for="(skill, index) in infoForm.skills.data"
          :key="index"
          @click="toEdit(item.type, index)"
        >
          <view class="ml-con flex justify-between text-xs">
            <text class="margin-right-lg">{{ skill.text }}</text>
            <view>
              掌握程度
              <uni-rate :size="5" :value="skill.type" />
            </view>
          </view>
        </view>
      </view>
      <!-- 兴趣爱好 -->
      <view
        v-if="item.type == 5 && infoForm.hobby"
        @click="toEdit(item.type, undefined)"
      >
        <view
          v-if="infoForm.hobby.data"
          class="ml-con flex justify-between text-xs padding-top-xs"
        >
          <div v-html="infoForm.hobby.data.text"></div>
        </view>
      </view>
    </template>
  </view>
  <tab-bar></tab-bar>
</template>

<script setup lang="ts">
import { getCurrentNote } from "@/api";
import { ref, reactive, toRefs, computed } from "vue";
import { upload, getpdf } from "@/api/index";
import { onShow, onLoad } from "@dcloudio/uni-app";
import loading from "@/utils/index";
const userInfo = uni.getStorageSync("userInfo");
const name = ref("1");
let updateId = 0;
name.value = userInfo.account;
interface itemFace {
  label: string;
  icon: string;
  url: string;
}
let state: any = reactive({
  list: [
    {
      label: "基本信息",
      icon: "",
      url: "/pages/basicInfomation/index",
      type: -1,
    },
    {
      label: "自我评价",
      icon: "add",
      url: "/pages/selfEvaluation/index",
      type: 0,
    },
    // { label: "求职意向", icon: "" },
    {
      label: "教育背景",
      icon: "add",
      type: 1,
      url: "/pages/educationalBg/index",
    },
    {
      label: "工作经历",
      icon: "add",
      url: "/pages/workExperience/index",
      type: 2,
    },
    // { label: "在线经历", icon: "add" },
    {
      label: "资格证书",
      icon: "add",
      url: "/pages/certificate/index",
      type: 3,
    },
    {
      label: "职业技能",
      icon: "add",
      type: 4,
      url: "/pages/skills/index",
    },
    { label: "兴趣爱好", icon: "add", type: 5, url: "/pages/hobby/index" },
    // { label: "简历封面", icon: "" },
  ],
  infoForm: {
    isVertical: true,
    personal: {
      data: {
        img: "",
      },
    },
    workExperience: [],
    selfEvaluation: null,
    skills: [],
    hobby: null,
    educationalBg: [],
    certificate: [],
  },
});
const { list, infoForm } = toRefs(state);
onLoad(async (op) => {
  await getNote();
});
onShow((option: any) => {
  console.log(option, "6666");
  let personal = uni.getStorageSync("personal");
  let workExperience = uni.getStorageSync("workExperience");
  let educationalBg = uni.getStorageSync("educationalBg");
  let certificate = uni.getStorageSync("certificate");
  let skills = uni.getStorageSync("skills");
  let hobby = uni.getStorageSync("hobby");
  let selfEvaluation = uni.getStorageSync("selfEvaluation");
  infoForm.value.personal = personal;
  infoForm.value.workExperience = workExperience;
  infoForm.value.educationalBg = educationalBg;
  infoForm.value.certificate = certificate;
  infoForm.value.skills = skills;
  infoForm.value.hobby = hobby;
  infoForm.value.selfEvaluation = selfEvaluation;
  // getNote();
});

const completion = computed(() => {
  let complete: any = 0;
  Object.keys(infoForm.value).forEach((key) => {
    let noteObj = [
      "personal",
      "workExperience",
      "selfEvaluation",
      "skills",
      "hobby",
      "educationalBg",
      "certificate",
    ];
    if (infoForm.value[key] && noteObj.includes(key)) {
      complete += Math.floor(100 / 7);
    }
  });
  return complete === 98 ? 100 : complete;
});

const getNote = async () => {
  let data: any = await getCurrentNote();
  if (updateId && updateId == data.data[0].note[0]._id) {
    return;
  }
  infoForm.value = data.data;
  updateId = data.data._id;
  uni.setStorageSync("personal", infoForm.value.personal);
  uni.setStorageSync("workExperience", infoForm.value.workExperience);
  uni.setStorageSync("educationalBg", infoForm.value.educationalBg);
  uni.setStorageSync("certificate", infoForm.value.certificate);
  uni.setStorageSync("skills", infoForm.value.skills);
  uni.setStorageSync("hobby", infoForm.value.hobby);
  uni.setStorageSync("selfEvaluation", infoForm.value.selfEvaluation);
};
function onChooseImage() {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: ({ tempFilePaths }) => {
      upload(tempFilePaths).then(async (res: any) => {
        console.log(res.data, "res");
        infoForm.value.personal.data.img = res.data;
        // uni.setStorageSync("imgUrl", imgUrl.value);
      });
    },
  });
}
function onDelImg() {
  infoForm.value.personal.data.img = "";
}
function onNavigationTo(item: itemFace) {
  if (item.url) {
    uni.navigateTo({
      url: item.url,
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        getData: function (key: string, data: any) {
          console.log(data);
        },
      },
    });
  }
}

const preView = () => {
  if (!infoForm.value.personal.data.img) {
    uni.showToast({
      title: "请上传个人头像",
      icon: "none",
    });
    return;
  }

  loading.show();
  let params = { ...state.infoForm };
  getpdf(params).then((res: any) => {
    loading.hide();
    uni.navigateTo({ url: "/pages/preView/index?url=" + res.data });
  });
};

const toEdit = (type: number, index: number | undefined) => {
  const { list } = state;
  let o = list.find((item: any) => item.type == type);
  console.log(o, list);
  let keyMap: any = {
    "-1": "personal",
    0: "selfEvaluation",
    1: "educationalBg",
    2: "workExperience",
    3: "certificate",
    4: "skills",
    5: "hobby",
  };
  let data = null;
  if (Array.isArray(state.infoForm[keyMap[type]].data)) {
    data = state.infoForm[keyMap[type]].data[index as number];
  } else {
    data = state.infoForm[keyMap[type]];
  }
  console.log(data, "data");
  uni.navigateTo({
    url: `${o.url}?index=${index}`,
  });
};

const myNote = () => {
  uni.navigateTo({ url: "/pages/notes/index" });
};
</script>

<style scoped>
.container {
  background-color: white;
  padding-bottom: 110rpx;
}
.add,
.bg-img {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200rpx;
  height: 200rpx;
  margin-left: 16rpx;
  text-align: center;
  border-radius: 20rpx;
  overflow: hidden;
}
.pic {
  width: 100%;
  height: 100%;
}
.cu-tag {
  position: absolute;
  right: 0;
  top: 0;
}
.cuIcon-cameraadd {
  font-size: 50rpx;
}
.ml-con {
  margin-left: 66rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20rpx;
}
.line-height-40 {
  line-height: 40rpx;
}
</style>
